<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { ref } from 'vue';
import Pull from '@/components/Pull.vue'
import CheckDevice from '@/components/CheckDevice.vue'
import USer from '@/components/User.vue'
import Group from '@/components/Group.vue'
import Share from '@/components/displayShare.vue'
import { onMounted } from 'vue';
var compoent = ref();
var current = ref();
var connection = null;
const changeCompoent = (type) => {
  if (type == 1) {
    current.value = CheckDevice;
  }
  else if (type == 2) {
    current.value = Group;
  }
  else if (type == 3) {
    current.value = USer;
  }
  else if (type == 4) {
    current.value = Share;
 
  }
}
onMounted(() => {
  current.value = CheckDevice;

});
</script>

<template>
  <main style="width: 100vw; height: 100vh;">
    <el-row style="display: flex; flex-direction: row;">
      <el-col :span="12" style="width: 10vw;justify-content: flex-start;">
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="1"
          style="height: 100vh;" text-color="#fff">
          <el-menu-item index="1" @click="changeCompoent(1)">
            <el-icon>
              <document />
            </el-icon>
            <span>设备检测/参数设置</span>
          </el-menu-item>
          <el-menu-item index="2" @click="changeCompoent(2)">
            <el-icon>
              <setting />
            </el-icon>
            <span>群组</span>
          </el-menu-item>
          <el-menu-item index="3" @click="changeCompoent(3)">
            <el-icon>
              <setting />
            </el-icon>
            <span>单聊</span>
          </el-menu-item>
          <el-menu-item index="4" @click="changeCompoent(4)">
            <el-icon>
              <setting />
            </el-icon>
            <span>桌面共享</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col style="border-color: blanchedalmond; width: auto; justify-items: flex-end;">
        <keep-alive>

          <component ref="compoent" :is="current"></component>
        </keep-alive>
      </el-col>
    </el-row>
  </main>
</template>
<style scoped>
.el-col-12 {
  flex: 0, 0, 0;
  max-width: 10vw
}

.el-col-24 {

  flex: 0, 0, 0;
  max-width: 90vw
}
</style>
